<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        table {
            width: 100%;
        }

        table, tr, td {
            border: 1px #f5f5f5 solid;
            border-collapse: collapse;
            padding: 3px;
            text-align: center;
        }

        #myChart {
            width: 100%;
            height: 500px;
        }
    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        function disableEnter(e) {
            if (e.keyCode === 13) {
                return false;
            }
        }

        $(function () {
            $("#button1").click(function () {
                var val = $("#country").val();
                if (val !== "") {
                    location.href = "/country/" + val;
                } else {
                    return false;
                }
            })
        })
    </script>
</head>
<body>
<div>
    <h1 style="text-align: center">全球新型冠状病毒实时数据统计</h1>
</div>
<div id="myChart"></div>

<div id="searchBar">
    <form method="post" action="/home">
        Country:<input type="text" id="country" placeholder="all" onkeydown="return disableEnter(event)">
        <input type="button" value="提交" id="button1"/>
    </form>
</div>

<div>
    <table>
        <tr>
            <th>Province/State</th>
            <th>Country/Region</th>
            <th>Latitude</th>
            <th>Longitude</th>
            <th id="LastestDate"></th>
        </tr>
        <tr th:each="region:${regions}">
            <td th:text="${region.getProvince()}"></td>
            <td th:text="${region.getCountry()}"></td>
            <td th:text="${region.getLatitude()}"></td>
            <td th:text="${region.getLongitude()}"></td>
            <td th:text="${region.getLatestData()}"></td>
        </tr>
    </table>
</div>

<script>
    var v = '[[${country}]]';
    var country = [];
    var series = [];
    var data = [];
    //new Date(2020,1,22).getTime()缩写为+new Date(2020,1,22);
    var base = new Date(2020, 1, 22).getTime(), oneDay = 24 * 3600 * 1000;
    var dateList = [];
    var now = new Date(base);

    $.ajax({
        type: "GET",
        url: "/getCountryJson/" + v,
        dataType: "json",
        async: false,
        success: function (result) {
            //每次循环都执行data=[]初始化data集合
            for (var i = 0; i < result.length; ++i, data = []) {
                country.push(result[i].province + "," + result[i].country);
                // if (v === "all" && i === 0) {
                //     country.pop();
                // }
                for (var j = 0; j < result[i].dataList.length; ++j) {
                    if (i === 0) {
                        now = new Date(base);
                        base += oneDay;
                        dateList.push([now.getFullYear(), now.getMonth(), now.getDate()].join('/'));
                    }
                    data.push(result[i].dataList[j]);
                }

                //案例过多时,只显示前5个案例
                if (i < 10 && i%2 === 0) {
                    series.push({
                        name: result[i].province + "," + result[i].country,
                        type: 'line',
                        stack: '总量',
                        data: data
                    });
                }
            }
        },
        error: function (errorMsg) {
            alert("获取后台数据失败!");
        }
    });

    //设置表格标题中最新一天的日期
    document.getElementById("LastestDate").innerText=dateList[dateList.length-1];

    // alert(dateList);
    var myChart = echarts.init(document.getElementById("myChart"));

    var option = {
        // title: {
        //     text: '全球新型冠状病毒实时数据统计'
        // },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: country
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dateList
        },
        yAxis: {
            type: 'value'
        },
        series: series
    };
    myChart.setOption(option);
</script>

</body>
</html>